import L from "leaflet";
L.Control.ZoomwithLevel = L.Control.extend({
  // @section
  // @aka Control.Zoom options
  options: {
    position: "topleft",

    // @option zoomInText: String = '+'
    // The text set on the 'zoom in' button.
    zoomInText: "+",

    // @option zoomInTitle: String = 'Zoom in'
    // The title set on the 'zoom in' button.
    zoomInTitle: "放大",

    // @option zoomOutText: String = '-'
    // The text set on the 'zoom out' button.
    zoomOutText: "-",

    // @option zoomOutTitle: String = 'Zoom out'
    // The title set on the 'zoom out' button.
    zoomOutTitle: "缩小",

    // @option zoomOutText: String = '-'
    // The text set on the 'zoom out' button.
    zoomLevelText: "0",

    // @option zoomOutTitle: String = 'Zoom out'
    // The title set on the 'zoom out' button.
    zoomLevelTitle: "地图层级",

    showZoomLevel: true,
  },

  onAdd: function (map) {
    var zoomName = "leaflet-control-zoom",
      container = L.DomUtil.create("div", zoomName + " leaflet-bar"),
      options = this.options;

    if (options.showZoomLevel) {
      this._zoomLevelButton = this._createButton(
        this._map._zoom,
        options.zoomLevelTitle,
        zoomName + "-level",
        container,
        this._zoomLevel
      );
    }
    if (options.showLocation) {
      this._locationButton = this._createButton(
        this._map._zoom,
        options.locationTitle,
        zoomName + "-level",
        container,
        this._zoomLevel
      );
    }
    this._zoomInButton = this._createButton(
      options.zoomInText,
      options.zoomInTitle,
      zoomName + "-in",
      container,
      this._zoomIn
    );
    this._zoomOutButton = this._createButton(
      options.zoomOutText,
      options.zoomOutTitle,
      zoomName + "-out",
      container,
      this._zoomOut
    );

    this._updateDisabled();
    map.on("zoomend zoomlevelschange", this._updateDisabled, this);

    return container;
  },

  onRemove: function (map) {
    map.off("zoomend zoomlevelschange", this._updateDisabled, this);
  },

  disable: function () {
    this._disabled = true;
    this._updateDisabled();
    return this;
  },

  enable: function () {
    this._disabled = false;
    this._updateDisabled();
    return this;
  },

  _zoomIn: function (e) {
    if (!this._disabled && this._map._zoom < this._map.getMaxZoom()) {
      this._map.zoomIn(this._map.options.zoomDelta * (e.shiftKey ? 3 : 1));
    }
  },

  _zoomOut: function (e) {
    if (!this._disabled && this._map._zoom > this._map.getMinZoom()) {
      this._map.zoomOut(this._map.options.zoomDelta * (e.shiftKey ? 3 : 1));
    }
  },
  // eslint-disable-next-line no-unused-vars
  _zoomLevel: function (e) {},

  _createButton: function (html, title, className, container, fn) {
    var link = L.DomUtil.create("a", className, container);
    link.innerHTML = html;
    link.href = "#";
    link.title = title;

    /*
     * Will force screen readers like VoiceOver to read this as "Zoom in - button"
     */
    link.setAttribute("role", "button");
    link.setAttribute("aria-label", title);

    L.DomEvent.on(link, "mousedown dblclick", L.DomEvent.stopPropagation)
      .on(link, "click", L.DomEvent.stop)
      .on(link, "click", fn, this)
      .on(link, "click", this._refocusOnMap, this);

    return link;
  },

  _updateDisabled: function () {
    var map = this._map,
      className = "leaflet-disabled";

    L.DomUtil.removeClass(this._zoomInButton, className);
    L.DomUtil.removeClass(this._zoomOutButton, className);
    L.DomUtil.removeClass(this._zoomLevelButton, className);

    if (this.options.showZoomLevel) {
      this._zoomLevelButton.innerText = this._map._zoom;
    }
    if (this._disabled || map._zoom === map.getMinZoom()) {
      L.DomUtil.addClass(this._zoomOutButton, className);
    }
    if (this._disabled || map._zoom === map.getMaxZoom()) {
      L.DomUtil.addClass(this._zoomInButton, className);
    }
  },
});

// @namespace Map
// @section Control options
// @option zoomControl: Boolean = true
// Whether a [zoom control](#control-zoom) is added to the map by default.
//L.Map.mergeOptions({
//  zoomControl: true
//});
//
//L.Map.addInitHook(function () {
//  if (this.options.zoomControl) {
//    this.zoomControl = new L.Control.Zoom();
//    this.addControl(this.zoomControl);
//  }
//});

// @namespace Control.Zoom
// @factory L.control.zoom(options: Control.Zoom options)
// Creates a zoom control
L.control.zoomwithLevel = function (options) {
  return new L.Control.ZoomwithLevel(options);
};
